<template>
  <div class="slider" ref="slider">
    <div class="slider-group" ref="sliderGroup">
      <slot></slot>
    </div>
    <div class="dots">
      <span v-for="(iDot, index) in dots" :key="iDot" class="dot" :class="{ active: currentIndex === index }"></span>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { addClass } from 'common/js/dom'
import BScroll from 'better-scroll'

export default {
  name: 'slider',
  data() {
    return {
      dots: [],
      timer: null,
      currentIndex: 0,
      children: []
    }
  },
  props: {
    loop: {
      type: Boolean,
      default: true
    },
    autoPlay: {
      type: Boolean,
      default: true
    },
    interval: {
      type: Number,
      default: 3000
    }
  },
  methods: {
    _setSliderWidth(windowResize) {
      let children = this.$refs.sliderGroup.children
      this.children = children
      let sliderWidth = this.$refs.slider.clientWidth
      let groupWidth = 0

      for (let i = 0; i < children.length; i++) {
        let el = children[i]
        addClass(el, 'slider-item')
        el.style.width = sliderWidth + 'px'
        groupWidth += sliderWidth
      }
      if (this.loop && !windowResize) groupWidth += sliderWidth * 2
      this.$refs.sliderGroup.style.width = groupWidth + 'px'
    },
    _initScroll() {
      this.scroll = new BScroll(this.$refs.slider, {
        scrollX: true,
        scrollY: false,
        click: true,
        momentum: true,
        snap: { // snap 是特定为 slider功能设置的高级属性
          loop: this.loop, // loop: true 会复制两份对象到前后，用于滚动，此时的sliderWidth需要扩大2个item的width
          threshold: 0.3
        }
      })
      this.scroll.on('scrollEnd', () => {
        this.currentIndex = this.scroll.getCurrentPage().pageX
      })
    },
    _initDots() {
      this.dots = new Array(this.children.length)
    },
    _play() {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.scroll.next()
      }, this.interval)
    },
    resizeAction() {
      this._setSliderWidth(true)
    }
  },
  mounted() {
    let _this = this
    setTimeout(() => {
      _this._setSliderWidth()
      _this._initDots()
      _this._initScroll()
    }, 20)
    if (this.autoPlay) {
      this._play()
    }
    window.addEventListener('resize', this.resizeAction)
  },
  destroy() {
    window.removeListener('resize', this.resizeAction)
    clearInterval(this.timer)
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import "~common/stylus/variable"

.slider
  position: relative
  min-height: 1px
  width: 100%
  overflow: hidden
  .slider-group
    position: relative
    overflow: hidden // 子元素为 float ，overflow: hidden 触发BFC
    white-space: nowrap // 子元素不换行
    .slider-item
      float: left
      box-sizing: border-box
      overflow: hidden
      text-align: center
      a
        // display: block
        // width: 100%
        // overflow: hidden
        text-decoration: none
        img
          display: block
          width: 100%
  .dots
    position: absolute
    right: 0
    left: 0
    bottom: 12px
    text-align: center
    font-size: 0
    .dot
      display: inline-block
      margin: 0 4px
      width: 8px
      height: 8px
      border-radius: 50%
      background: $color-text-l
      &.active
        // width: 20px
        border-radius: 5px
        background: #fff

</style>
